<script setup>

import {isNotEmpty} from '@/qly/verificate'

const props = defineProps({
    fontColor: {
        type: String,
        default: '#000000'
    },
    backgroundColor: {
        type: String,
        default: '#ffffff'
    },
    title: {
        type: String,
        default: ''
    },
    back: {
        type: String,
        // auto,show,hide
        default: 'auto'
    },
    customBackFun: {
        type: Function,
        default: null
    }
})

onShow(() => {
    uni.setNavigationBarColor({
        frontColor: props.fontColor,
        backgroundColor: props.backgroundColor
    })
})

const openBack = () => {
    if (isNotEmpty(props.customBackFun) && typeof props.customBackFun === 'function') {
        props.customBackFun()
    } else if (getCurrentPages().length === 1) {
        qly.page._reLaunch('/pages/load/index')
    } else {
        qly.page.back()
    }
}

const navBarInfo = computed(() => {
    const systemInfo = uni.getSystemInfoSync()
    const statusBarHeight = systemInfo.statusBarHeight
    const result = {statusBarHeight}
    /* #ifdef MP-WEIXIN */
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    const space = menuButtonInfo.top - statusBarHeight
    result.navbarHeight = space + menuButtonInfo.height + space
    /* #endif */
    /* #ifndef MP-WEIXIN */
    result.navbarHeight = 44
    /* #endif */
    return result
})

const showBack = computed(() => {
    if (props.back === 'show') {
        return true
    }
    if (props.back === 'hide') {
        return false
    }
    return getCurrentPages().length > 1
})

/* #ifdef MP-WEIXIN */
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const menuButtonStyle = computed(() => {
    return {
        'flex-shrink': 0,
        'width': menuButtonInfo.width + 'px',
        'height': menuButtonInfo.height + 'px',
    }
})
/* #endif */

</script>

<template>
    
    
    <view class="bang-navbar" :style="{ 'color':fontColor, 'background-color':backgroundColor}">
        <!--     #ifndef H5       -->
        <view :style="{'height':navBarInfo.statusBarHeight+'px'}"/>
        <!--     #endif       -->
        <view class="nav-content" :style="{'height':navBarInfo.navbarHeight+'px'}">
            <slot name="navContent">
                <view class="nav-left">
                    <slot name="left">
                        <uni-icons style="flex-shrink: 0" v-if="showBack" type="left"
                                   :color="fontColor" size="28" @click="openBack"/>
                    </slot>
                </view>
                <view class="nav-title">
                    <slot name="title">
                        {{ props.title }}
                    </slot>
                </view>
                <view class="nav-right">
                    <slot name="right"/>
                    <view v-if="menuButtonStyle" :style="menuButtonStyle"/>
                </view>
            </slot>
        </view>
    </view>
</template>

<style scoped>

.nav-left, .nav-right {
    width: 32rpx;
    margin: 0 24rpx;
    display: flex;
    align-items: center;
}

.nav-left {
    justify-content: flex-start;
}

.nav-right {
    justify-content: flex-end;
}


.nav-content {
    display: flex;
    align-items: center;
    gap: 24rpx;
}

.bang-navbar {
    display: flex;
    flex-direction: column;
}

.nav-title {
    font-size: 36rpx;
    text-align: center;
    flex: 1;
}
</style>
